<!-- 维保工单详情 -->
<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block style="color: ##777777;font-size: 32rpx;" slot="content">维保工单详情</block>
		</cu-custom>
		<view class="content" style="background-color: #fff;">
			<ul>
				<li v-if="maintenanceInfo.abnormalPic">
					<text class="list-info">隐患图片：</text>
					<image :src="maintenanceInfo.abnormalPic"></image>
				</li>
				<li>
					<text class="list-info">工单名称：</text>
					<text class="list-title">{{maintenanceInfo.name || '暂无'}}</text>
				</li>
				<li>
					<text class="list-info">设备名称：</text>
					<text class="list-title">{{maintenanceInfo.equipmentName || '暂无'}}</text>
				</li>
				<li>
					<text class="list-info">所属企业：</text>
					<text class="list-title">{{maintenanceInfo.enterpriseName || '暂无'}}</text>
				</li>
				<li>
					<text class="list-info">所属区域：</text>
					<text class="list-title">{{maintenanceInfo.regionName || '暂无'}}</text>
				</li>
				<li>
					<view class="list-box" style="padding: 0;font-size: 12px;line-height: 94rpx;">
						<p class="list-info">故障描述：</p>
						<p class="list-title">{{ maintenanceInfo.remark || '暂无' }}</p>
					</view>
				</li>
				<li>
					<text class="list-info">上报人电话：</text>
					<text class="list-title">{{maintenanceInfo.reportPersonTel || '暂无'}}</text>
				</li>
				<li>
					<text class="list-info">当前状态：</text>
					<text class="list-title">{{maintenanceInfo.statusStr || '暂无'}}</text>
				</li>
				<li>
					<text class="list-info">整改期限：</text>
					<text class="list-title">{{(maintenanceInfo.deadline | dateFormat) || '暂无'}}</text>
				</li>
				<li v-if="maintenanceInfo.status==16">
					<text class="list-info">申请整改时间：</text>
					<text class="list-title">{{maintenanceInfo.examineTime | dateFormat}}</text>
				</li>
			</ul>
			<view v-if="maintenanceInfo.status == 5 || maintenanceInfo.completeUrl" style="height:220px">
				<view class="cu-bar bg-white margin-top my-flag">
					<view class="action">
						完成照片
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
							:data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="flex btns-group">
			<button class="my-btn-grpup" v-if="maintenanceInfo.status==1" @click="qrsd()">确认收到</button>
			<button class="my-btn-grpup" v-if="maintenanceInfo.status==2" @click="qrsdyh()">到场确认</button>
			<button class="my-btn-grpup" v-if="maintenanceInfo.status==3" @click="xccz()">现场处置</button>
			<button class="my-btn-grpup" v-if="maintenanceInfo.status==3" @click="fkzgsj()">反馈整改时间</button>
			<button class="my-btn-grpup" v-if="maintenanceInfo.status==3" @click="gtgdxq()">采购沟通</button>
			<button class="my-btn-grpup" v-if="maintenanceInfo.status==3" @click="thyy()">工单退回</button>
			<button class="my-btn-grpup" v-if="maintenanceInfo.status==13" @click="gtwc()">沟通完成</button>
			<button class="my-btn-grpup" v-if="maintenanceInfo.status==5 && imgList.length>0" @click="submit()">提交</button>
		</view>

		<!-- 退回弹窗 -->
		<u-popup :show="backShow" closeOnClickOverlay @close="backShow = false">
			<u-form labelPosition="left" :model="model1" ref="form1">
				<u-form-item label="退回原因" prop="feedbackRemark" borderBottom>
					<u-input v-model="model1.feedbackRemark" placeholder="请输入退回原因"></u-input>
				</u-form-item>
			</u-form>
			<view class="flex btns-group">
				<button class="my-btn-grpup" @click="gdth()">确认</button>
				<button class="my-btn-grpup" @click="backShow=false">取消</button>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<message />
	</view>
</template>

<script>
	import * as constants from '@/common/config.js';
	export default {
		data() {
			return {
				maintenanceInfo: {},
				imgList: [],
				ucId: '',
				backShow: false,
				model1: {
					ucId: null,
					feedbackRemark: null
				},
				rules1: {
					feedbackRemark: [{
						required: true,
						message: '请输入退回原因',
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onLoad(option) {
			this.ucId = option.ucId
			this.xq()
		},
		methods: {
			xq() {
				// 封装参数
				let params = {
					"ucId": this.ucId
				}
				let that = this
				// 请求数据
				let app = getApp()
				app.globalData.request({
					url: 'wx/workOrder/getInWorkOrderVo',
					data: {
						"ucId": this.ucId
					}
				}).then(function(res) {
					that.maintenanceInfo = res.data.data
				}).catch(function(e) {

				})
			},
			ChooseImage() {
				if (this.imgList.length === 1) {
					uni.showToast({
						title: "只能上传一张图片",
						icon: 'error'
					})
					return
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '维保图片',
					content: '确定要删除维保图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			qrsd() {
				let that = this
				let app = getApp()
				app.globalData.request({
					url: 'wx/workOrder/confirmWorkOrder',
					data: {
						"ucId": that.ucId
					}
				}).then(function(res) {
					that.xq()
				}).catch(function(e) {})
			},
			gtwc() {
				let that = this
				let app = getApp()
				app.globalData.request({
					url: 'wx/workOrder/communicationFinishBecomeContinue',
					data: {
						"ucId": that.ucId
					}
				}).then(function(res) {
					that.xq()
				}).catch(function(e) {})
			},
			thyy() {
				this.model1.ucId = null
				this.model1.feedbackRemark = null
				this.backShow = true
			},
			gdth() {
				this.$refs.form1.validate().then(res => {
					this.model1.ucId = this.ucId
					let that = this
					let app = getApp()
					app.globalData.request({
						url: 'wx/workOrder/workOrderReturn',
						data: this.model1
					}).then(function(res) {
						that.$refs.uToast.show({
							message: "退回成功",
							type: 'success',
							complete() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}).catch(function(e) {})
				}).catch(errors => {})
			},
			qrsdyh() {
				let that = this
				let app = getApp()
				app.globalData.request({
					url: 'wx/workOrder/startChangeStatus',
					data: {
						"ucId": that.ucId
					}
				}).then(function(res) {
					that.xq()
				}).catch(function(e) {})
			},
			// 现场处置
			xccz() {
				let that = this
				let app = getApp()
				app.globalData.request({
					url: 'wx/workOrder/directDisposal',
					data: {
						"ucId": that.ucId
					}
				}).then(function(res) {
					that.xq()
				}).catch(function(e) {})
			},
			fkzgsj() {
				uni.navigateTo({
					url: '../fkzg/fkzg?ucId=' + this.ucId
				});
			},
			gtgdxq() {
				uni.navigateTo({
					url: '../gtgdxq/gtgdxq?ucId=' + this.ucId
				});
			},
			submit() {
				let that = this
				let app = getApp()
				let token = app.globalData.getToken('authorization')
				// 点击上传后循环调用uni.uploadFile ，因微信小程序只支持单文件上传
				this.imgList.forEach(ele => {
					uni.uploadFile({
						url: constants.API + 'wx/common/upload',
						filePath: ele,
						header: {
							"authorization": token
						},
						name: 'file',
						success: (uploadFileRes) => {
							let imgObj = JSON.parse(uploadFileRes.data)
							// 生成报警信息
							let app = getApp()
							app.globalData.request({
								url: 'wx/workOrder/confirmEndChangeStatus',
								data: {
									"ucId": this.ucId,
									"completeUrl": imgObj.data
								}
							}).then(function(res) {
								that.$refs.uToast.show({
									message: "提交成功",
									type: 'success',
									complete() {
										uni.navigateBack({
											delta: 1
										})
									}
								})
							}).catch(function(e) {})
						}
					});
				})
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules1);
		}
	}
</script>

<style scoped>
	
</style>
